<template>
  <div class="box">
    <h1>商品管理 -- 修改商品</h1>
    <div class="detail_cotent">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input placeholder="请输入商品名称" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input
            placeholder="请输入商品描述"
            v-model="form.subtitle"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属分类">
          <el-select
            v-model="form.region"
            @change="regionChange"
            placeholder="请选择一级品类"
          >
            <el-option
              v-for="(item, index) in region1list"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
          <el-select
            v-if="form.region"
            v-model="form.region2"
            placeholder="请选择二级品类"
          >
            <el-option
              v-for="(item, index) in region2list"
              :key="index"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input class="inp" placeholder="价格" v-model="form.price">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品库存">
          <!-- stock -->
          <el-input class="inp" placeholder="库存" v-model="form.stock">
            <template slot="append">件</template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品图片">
          <el-upload
            name="upload_file"
            class="upload-demo"
            action="/api/product/upload.do"
            :on-preview="handlePreview"
            :before-remove="beforeRemove"
            :on-success="handleSuccess"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        <el-form-item label="商品详情"> </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { edit, deatil, Category1 } from "../../../http/http";
export default {
  data() {
    return {
      form: {},
      region1list: [],
      region2list: [],
      editorOption: {},
    };
  },
  mounted() {
    // console.log(this.$route);
    deatil(this.$route.params.data).then((res) => {
      this.form = res.data.data;

      this.form = {
        categoryId: res.data.data.categoryId,
        name: res.data.data.name,
        subtitle: res.data.data.subtitle,
        stock: res.data.data.stock,
        imageHost: res.data.data.imageHost,
        subImages: res.data.data.subImages,
        detail: res.data.data.detail,
        price: res.data.data.price,
        status: res.data.data.status,
        id: res.data.data.id,
      };
    });
    Category1().then((res) => {
      this.region1list = res.data.data;
    });
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log("cg", response.data.uri);
      this.form.subImages = response.data.uri;
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handlePreview(file) {
      console.log(file.name);

      this.form.subImages = file.name;
    },
    onEditorChange(v) {
      // console.log(v);
      this.form.detail = v.html;
    },
    regionChange(v) {
      this.region1list.map((item, i) => {
        if (item.name === v) {
          console.log(item);
          category1({ categoryId: item.id }).then((res2) => {
            this.region2list = res2.data.data;
          });
        }
      });
    },
    onSubmit() {
      edit(this.form).then((res) => {
        this.$message({
          message: res.data.data,
          type: "success",
        });
        this.$router.push({ path: "/permissions" });
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // handlePreview(file) {
    //   console.log(file);
    // },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
  },
};
</script>

<style scoped>
.box {
  width: 80%;
  margin-left: 20%;
}
.card {
  width: 80%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.shops {
  width: 500px;
  height: 20px;
  background-color: white;
  color: #333333;
}
.cards {
  width: 100%;
  height: 100px;
  border: 1px solid grey;
}
</style>